<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
       
    </style>
  </head>
  <body>
    <div id="app">
        <h1>{{msg}}</h1>
         <input type="text" v-focus.bg="cl">
         <!-- <div v-focus.bg="c1" style="width: 100px;height: 100px;"></div> -->
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
    <script>
      //局部注册自定义指、directive需要加s
      //
      const vm = new Vue({
        el: "#app",
        directives: {
          focus: {
            //钩子函数
            //由程序执行到某个阶段自己调用
            //只会执行一次
            bind(el, binding) {
              //el 就是指令所在的dom元素
              //binding 是个对象包含描述指令的一些属性
              //指令第一次绑定到节点就被调用
              console.log(el.parentNode)
            },
            inserted(el,binding,VNode) {
              //指令第一次插入父节点的时候调用
              console.log(el.parentNode);
              console.log(binding);
              el.focus();
              el.style.color = binding.value;
              console.log(VNode);
              //获取指令修饰符
              let isBg = !!binding.modifiers["bg"];
              if(isBg){
                el.style.background = "pink"
              }
            },
            update(el,binding) {
              //指令所在范围的虚拟dom更新时触发
              //需求要写在update里面
              console.log("虚拟dom更新了");
              el.style.color = binding.value;
            },
          },
        },
        data: {
            msg:"多喝热水",
            cl:"green",
        },
        methods: {},
      });
    </script>
  </body>
</html>
